import React, { useState, useEffect } from 'react';
import './App.css';
import './scss/index.scss';
import 'antd/dist/antd.css';
import {
  Layout,
  Menu,
  Typography,
  Row,
  Col,
  Avatar,
  Dropdown,
  Button,
  Menu as AntdMenu,
  Tooltip,
} from 'antd';
import { FileMarkdownTwoTone, UserOutlined } from '@ant-design/icons';
import routes from './routes';

import { Routes, Route, useNavigate, Outlet } from 'react-router-dom';

const { Title, Text } = Typography;
const { Header, Content } = Layout;

const App = () => {
  const [selectedKey, setSelectedKey] = useState('/home');
  const navigate = useNavigate();
  const [avatarUrl, setAvatarUrl] = useState(
    localStorage.getItem('headSculptureUrl') ||
      'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'
  );

  const handleMenuClick = ({ key }) => {
    setSelectedKey(key);
  };

  const handleExportClick = () => {
    // 处理导出全站按钮的点击事件
  };

  const handleProfileClick = ({ key }) => {
    // 处理个人信息和退出登录按钮的点击事件
    if (key === 'profile') {
      // 处理个人信息按钮的点击事件
    } else if (key === 'logout') {
      // 处理退出登录按钮的点击事件
    }
  };

  const menu = (
    <AntdMenu onClick={handleProfileClick}>
      <AntdMenu.Item key='profile'>个人信息</AntdMenu.Item>
      <AntdMenu.Item key='logout'>退出登录</AntdMenu.Item>
    </AntdMenu>
  );

  return (
    <Layout style={{ height: '100%' }}>
      <Header className='header'>
        <Row>
          <Col
            span={6}
            style={{ display: 'flex', color: 'white', alignItems: 'center' }}>
            <Title level={5}>
              <Text
                strong
                style={{ color: 'white', alignItems: 'center' }}>
                {' '}
                神奇笔记本
              </Text>
            </Title>
          </Col>
          <Col span={12}>
            <Menu
              theme='dark'
              mode='horizontal'
              selectedKeys={[selectedKey]}
              onClick={handleMenuClick}>
              {routes.map(route => (
                <Menu.Item
                  key={route.path}
                  onClick={() => navigate(route.path)}>
                  {route.name}
                </Menu.Item>
              ))}
            </Menu>
          </Col>
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              flex: 1,
            }}>
            <Tooltip title='导出全站'>
              <Button
                type='primary'
                icon={<FileMarkdownTwoTone />}>
                导出神奇笔记
              </Button>
            </Tooltip>
            <Dropdown overlay={menu}>
              <Avatar
                size={40}
                icon={<UserOutlined />}
                src={avatarUrl}
                style={{ marginLeft: 16, cursor: 'pointer' }}
              />
            </Dropdown>
          </div>
        </Row>
      </Header>
      <Content style={{ padding: '0', overflow: 'auto' }}>
        <Routes>
          {routes.map(route => {
            return (
              <Route
                key={route.key}
                path={route.path}
                element={<route.component />}
              />
            );
          })}
        </Routes>
        <Outlet />
      </Content>
    </Layout>
  );
};

export default App;
